<template>
    <div>
        <el-form label-width="80px">
            <el-row>
                <el-col :xs="{span:24}" :sm="{span:5}">
                    <el-form-item label="新闻标题">
                        <el-input size="small"   v-model="newTitle" placeholder="请输入新闻标题"></el-input>
                    </el-form-item>
                </el-col>
                 <el-col :xs="{span:24}" :sm="{span:5}">
                    <el-form-item label="新闻类型">
                        <el-select size="small" v-model="newType" placeholder="请选择新闻类型">
                            <el-option
                            v-for="item in newsAllType"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select>
                     </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="{span:24}" :sm="{span:5}">
                    <el-form-item label="新闻主图">
                       <el-upload
                            class="avatar-uploader"
                            action="/api/news/upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                     </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="{span:24}" :sm="{span:12}">
                    <el-form-item label="新闻介绍">
                        <el-input size="small" v-model="subTitle" placeholder="请输入新闻介绍"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="新闻详情">
            </el-form-item>
            <simditor id="aa" ref="simditor"
            @change="change"
            :value="content"
             >
            </simditor>
            <div class="list-button">
                <el-button type="primary" @click="newsSubmit">提交</el-button>
                <router-link to="/manage/news">
                    <el-button>取消</el-button>
                </router-link>
            </div>
        </el-form>
    </div>
</template>
<script>
import Simditor from '@/components/back/manage/Simditor'
import 	News 		from "@/service/news-service.js";
import 	Menu 		from "@/service/menu-service.js"
const 	_menu 	    = new Menu();
const 	_news 		= new News();
export default {
    name:"editNews",
    data() {
        return {
            newId:'',
            newsAllType:[],
            value: '',
            imageUrl: '',
            newTitle:'',
            subTitle:'',
            content:'',
            newType:''
        }
    },
    components: {
        Simditor
    },
    mounted(){
        this.findNewType();
        // 这里是判断是否是编辑模式，如果有参数的话就是编辑模式，否则就是新增模式
        if(this.$route.params.newId){
            this.findNewById(this.$route.params.newId)
        }
    },
    methods: {
        findNewById(id){
            const loading = this.$loading({
                lock: true,
                text: '加载中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            this.newId = this.$route.params.newId;
            _news.findOneNews({'id':id}).then((res)=>{
                this.imageUrl=res.data.img_url;
                this.newTitle=res.data.title;
                this.subTitle=res.data.sub_title;
                this.newType=res.data.new_type;
                this.content=res.data.content;
                this.setValue(this.content)
                loading.close();
            },(err)=>{
                this.$message.error(err);
            })
        },
        change(val){
            this.content = val;
        },
        setValue(val){
            this.$refs.simditor.setValue(val);
        },
        // 这里是查找所有的新闻类型
        findNewType(){
           _menu.menuList({pId:"1"}).then((res)=>{
               this.newsAllType = res.data;
           },(err)=>{
                this.$message.error(err);
           }) 
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = file.response.file_path;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        // 这里是提交按钮
        newsSubmit(){
            const loading = this.$loading({
                lock: true,
                text: '保存中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            if(this.imageUrl != '' || this.newTitle != '' || this.subTitle != '' || this.content != '' || this.newType != ''){
                let reqData = {
                    newId:this.newId,
                    imageUrl: this.imageUrl,
                    newTitle: this.newTitle,
                    subTitle: this.subTitle,
                    content: this.content,
                    newType: this.newType
                };
                _news.saveNews(reqData).then((res)=>{
                    console.log(res)
                    if(res.data = 1){
                        this.$router.push({path:'/manage/news'});
                    }
                },(err)=>{
                    console.log(err)
                })
                loading.close();
            }else{
                this.$message.error('请填充好所有的数据！');
                loading.close();
            }
            
        }
    }
}
</script>
<style>
@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.list-button{
    text-align: center;
    margin: 20px;
}

</style>
